<template>
  <div class="m-comment-list">
    <w-panel-wrap>
      <w-table :columns="columns">
        <!-- 商品列表 -->
        <tr v-for="item in list">
          <td class="goods">
            <img v-lazy="item.evaluateGoods.goodsImagePath">
            <p>{{item.evaluateGoods.goodsName}}</p>
          </td>
          <td>
            <w-rate :value="item.descriptionEvaluate"></w-rate>
          </td>
          <td>
            <w-rate :value="item.shipEvaluate"></w-rate>
          </td>
          <td>
            <w-rate :value="item.serviceEvaluate"></w-rate>
          </td>
          <td class="c-high" :title="item.evaluateInfo">{{item.evaluateInfo}}</td>
          <td class="c-main" :title="item.userName">{{item.userName}}</td>
          <td>
            <button class="c-main" @click="visableEvalute(item, 1)" v-if="item.evaluateStatus == 0">屏蔽评价</button>
            <button class="c-blue" @click="visableEvalute(item, 0)" v-if="item.evaluateStatus == 1">取消屏蔽</button>
          </td>
        </tr>
        <tr v-if="!list || list.length == 0">
          <td colspan="7">暂无数据</td>
        </tr>
      </w-table>
    </w-panel-wrap>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // 表格头
        columns: [
          {title: '商品', width: '20%'},
          {title: '商品评价'},
          {title: '物流评价'},
          {title: '服务评价'},
          {title: '评价内容'},
          {title: '评价人'},
          {title: '操作'}
        ]
      }
    },
    props: {
      list: {
        type: Array,
        default: () => { return [] }
      }
    },
    methods: {
      // 确认发货
      onDeliver() {
        this.$children[1].fixedPanel = true
      },
      // 弹出框确认
      onConfirm() {
      },

      /**
       * 屏蔽当前评论（由父级处理）
       * @param {Object} item 当前评价
       * @param {Integer} type 当前是屏蔽还是取消屏蔽
       */
      visableEvalute(item, type) {
        this.$emit('visable', {id: item.id, visable: type})
      }
    }
  }
</script>

<style lang="scss" scoped>
  .m-comment-list {
    margin-top: 30px;
  }
  .c-high, .c-main {
    max-width: 128px;
    overflow: hidden;
  }
</style>